<template>
	<view class="container" style="background: #f1f1f1;" :style="{'min-height':height+'px'}">
		<view v-if="list.length">
			<block class="h-list">
				<!-- #ifdef H5-->
				<view class="h-box" style="position: fixed;top: 44px;width: 100%;z-index: 101;background: #f1f1f1;">
				<!-- #endif -->
				<!-- #ifdef APP-PLUS-->
				<view class="h-box border-bt border-tp" style="position: fixed;top: 0;width: 100%;z-index: 101;background: #f1f1f1;">
				<!-- #endif -->
				
					<view style="width:calc(26% - 28px);text-align: left;">
						名称
					</view>
					<view style="width:24%;">
						最新价
					</view>
					<view style="width:25%;">
						涨跌
					</view>
					<view style="width:calc(25% - 0px);">
						涨跌幅
					</view>
				</view>
			</block>
			<block class="h-list" v-for="i,index in list">
				<view class="h-box h-boxs border-bt" :style="{'margin-top': index==0?'30px':0}">
					<view style="width:calc(26% - 28px);text-align: left;">
						<text style="color: #000000;font-size: 14px;">{{i.CommodityNo + i.ContractDate}}</text>
						<view style="font-size: 12px;">
							{{i.ContractName}}
						</view>
					</view>
					<view style="width:24%;padding-top: 22px;" :style="{color:Number(i.ChangeValue)>0?'#9c1929':Number(i.ChangeValue)==0?'#000':'green'}">
						<text>{{Number(i.LastPrice).toFixed(2)}}</text>
					</view>
					<view style="width:25%;padding-top: 22px;">
						<text :style="{color:Number(i.ChangeValue)>0?'#9c1929':Number(i.ChangeValue)==0?'#000':'green'}">{{Number(i.ChangeValue)>0?'+':''}}{{Number(i.ChangeValue)}}</text>
						<!-- <view style="font-size: 12px;text-indent: 5px;">
							最高:26544.00
						</view> -->
					</view>
					<view style="width:calc(25% - 0px);padding-top: 22px;">
						<text  :style="{color:Number(i.ChangeValue)>0?'#9c1929':Number(i.ChangeValue)==0?'#000':'green'}">{{Number(i.ChangeRate).toFixed(2)}}%</text>
						<!-- <view style="font-size: 12px;text-indent:5px">
							最低:26504.00
						</view> -->
					</view>
				</view>
			</block>
		</view>
		<view class="" v-if="!list.length && load">
			<uni-text style="height: 400x;font-size: 16px;text-align: center;display: block;color: red;padding-top: 150px;">
				暂无行情信息！
			</uni-text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				height:0,
				load:false
			}
		},
		onHide() {
			uni.closeSocket();
		},
		onShow(){
			var _this = this;
			uni.getNetworkType({
			    success: function (res) {
			        if(res.networkType == 'none'){
						uni.showToast({
							title: '当前无网络连接，请检查！',
							icon: 'none',
							duration:5000,
							
							// position:'top'
						});
					}
			    }
			});
			uni.onNetworkStatusChange(function (res) {
				if(!res.isConnected){
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration:3000
						// position:'top'
					});
				}else{
					uni.showToast({
						title: '网络已连接！',
						icon: 'none',
						duration:3000
						// position:'top'
					});
					_this.getdata();
				}
			});
			_this.getdata();
			// console.log(123)
			this.height = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			getdata(){
				var _this = this;
				uni.connectSocket({
				    url: this.$store.state.serketUrl,
				});
				uni.onSocketOpen(function (res) {
				  console.log('WebSocket连接已打开！');
				});
				
				uni.onSocketError(function (res) {
				  // console.log('WebSocket连接打开失败，请检查网络！');
				  uni.showToast({
				  	title: res,
				  	icon: 'none'
				  	// position:'top'
				  });
				});
				
				uni.request({
				    url: _this.$store.state.url +'/api/quotation/getlist', //行情
					method:'POST',
				    data: {
				    },
				    success: (res) => {
						res = res.data;
						// console.log(res)
				        if (res.code == 200) {
							_this.load = true;
				            _this.list = res.data;
							// console.log( _this.list)
							uni.onSocketMessage(function (res) {
							  // console.log('收到服务器内容：' + res.data);	
							  var strarr = res.data.split(',');
							  if(strarr.length <= 10){
								 return;
							  }
							  // console.log(strarr)
							  var str = strarr[2] + '' + strarr[3];
							  for(var k in _this.list){
								  var o = _this.list[k];
								  // console.log(o.CommodityNo + o.ContractDate == str,o.CommodityNo + o.ContractDate , str)
								  if(o.CommodityNo + o.ContractDate == str){
									 _this.list[k].LastPrice = strarr[12];
									 _this.list[k].ChangeRate  = strarr[31];
									 _this.list[k].ChangeValue   = strarr[32];
									 break;
								  }
							  }
							});
				        }
				    },
					fail:(res)=>{
						// console.log(res)
						_this.load = true;
					}
				})
			}
		}	
	}
</script>

<style scoped>
	uni-page-body, uni-page-refresh{
		background: #f1f1f1;
	}
	.h-box>uni-view{
		height: 30px;
		line-height: 30px;
		float: left;
		text-align: right;
		color: #9b9b9b;
		font-size: 14px;
		
	}
	.h-box{overflow: hidden;}
	.h-box>uni-view:first-of-type{padding-left: 14px;}
	.h-box>uni-view:last-of-type{padding-right: 14px;}
	/* .h-box{background: -webkit-gradient(linear,0 100%, 100% 100%, from(rgba(4, 110, 246,0)), to(rgba(4, 110, 246,1)));} */
	.h-boxs>uni-view{
		height: auto;
		padding: 15px 0;
		line-height: normal;
		font-size: 14px;
		
	}	
	.h-boxs>uni-view uni-view {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
</style>
